<template>
  <div class="index">
    <nut-searchbar
      class="search"
      background="#efefef"
      placeholder="请输入商品或店铺名称"
      @click-input="$router.push('/search')"
    >
      <template #rightout>
        <Search />
      </template>
    </nut-searchbar>

    <!-- 轮播图 -->
    <nut-swiper
      class="swiper"
      :init-page="swiper.page"
      :pagination-visible="true"
      pagination-color="#426543"
      auto-play="3000"
    >
      <nut-swiper-item v-for="(item, index) in swiper.list" :key="index">
        <img class="swiper-img" :src="item" alt="" />
      </nut-swiper-item>
    </nut-swiper>

    <!-- 快速导航 -->
    <nut-grid class="quick">
      <nut-grid-item
        :text="item.name"
        v-for="(item, index) in quickNav.list"
        :key="index"
        @click="$router.push('/search')"
      >
        <img class="quick-img" :src="item.icon" alt="" />
      </nut-grid-item>
    </nut-grid>

    <!-- 推荐商品 -->
    <nut-row class="recommend">
      <nut-col :span="12">
        <nut-grid square :border="false" :column-num="2">
          <nut-grid-item
            :text="item.name"
            v-for="(item, index) in recommend.leftList"
            :key="index"
            @click="$router.push('/product')"
          >
            <img class="recommend-img" :src="item.image" alt="" />
            <slot name="text">
              <nut-price
                :price="item.price"
                size="small"
                :need-symbol="false"
              />
            </slot>
          </nut-grid-item>
        </nut-grid>
      </nut-col>
      <nut-col :span="12">
        <nut-grid
          :gutter="2"
          class="top"
          square
          :border="false"
          :column-num="2"
        >
          <nut-grid-item
            :text="item.name"
            v-for="(item, index) in recommend.rightList.slice(0, 2)"
            :key="index"
            @click="$router.push('/product')"
          >
            <img class="recommend-img" :src="item.image" alt="" />
            <slot name="text">
              <nut-price
                :price="item.price"
                size="small"
                :need-symbol="false"
              />
            </slot>
          </nut-grid-item>
        </nut-grid>
        <nut-grid
          :gutter="2"
          class="bottom"
          square
          :border="false"
          :column-num="2"
        >
          <nut-grid-item
            :text="item.name"
            v-for="(item, index) in recommend.rightList.slice(2, 4)"
            :key="index"
            @click="$router.push('/product')"
          >
            <img class="recommend-img" :src="item.image" alt="" />
            <slot name="text">
              <nut-price
                :price="item.price"
                size="small"
                :need-symbol="false"
              />
            </slot>
          </nut-grid-item>
        </nut-grid>
      </nut-col>
    </nut-row>

    <div class="product">
      <nut-card
        @click="$router.push({ path: '/product', query: { skuId: item.skuId } })"
        v-for="(item, index) in product.list"
        :key="index"
        :img-url="item.imgUrl"
        :title="item.title"
        :price="item.price"
        :vipPrice="item.vipPrice"
        :shopDesc="item.shopDesc"
        :delivery="item.delivery"
      ></nut-card>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { Search } from "@nutui/icons-vue";

// 轮播图
const swiper = reactive({
  page: 0,
  list: [
    "https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg",
    "https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg",
    "https://storage.360buyimg.com/jdc-article/welcomenutui.jpg",
    "https://storage.360buyimg.com/jdc-article/fristfabu.jpg",
  ],
});

// 快速导航
const quickNav = reactive({
  list: [
    {
      name: "手机",
      icon: require("@/assets/index/quick/phone.png"),
    },
    {
      name: "数码",
      icon: require("@/assets/index/quick/digital.png"),
    },
    {
      name: "家电",
      icon: require("@/assets/index/quick/icebox.png"),
    },
    {
      name: "乐器",
      icon: require("@/assets/index/quick/piano.png"),
    },
    {
      name: "宠物",
      icon: require("@/assets/index/quick/cat.png"),
    },
    {
      name: "食品",
      icon: require("@/assets/index/quick/food.png"),
    },
    {
      name: "运动",
      icon: require("@/assets/index/quick/ball.png"),
    },
    {
      name: "服装",
      icon: require("@/assets/index/quick/cloth.png"),
    },
  ],
});

// 推荐商品
const recommend = reactive({
  leftList: [
    {
      image: require("@/assets/index/recommend/mi14.jpg"),
      price: 4299,
    },
    {
      image: require("@/assets/index/recommend/sneakers.jpg"),
      price: 349,
    },
    {
      image: require("@/assets/index/recommend/camera.jpg"),
      price: 7499,
    },
    {
      image: require("@/assets/index/recommend/box.jpg"),
      price: 499,
    },
  ],
  rightList: [
    {
      image: require("@/assets/index/recommend/book.jpg"),
      price: 12.7,
    },
    {
      image: require("@/assets/index/recommend/paper.jpg"),
      price: 12.9,
    },
    {
      image: require("@/assets/index/recommend/casio.jpg"),
      price: 178,
    },
    {
      image: require("@/assets/index/recommend/water.jpg"),
      price: 355,
    },
  ],
});

const product = reactive({
  list: [
    {
      skuId: 37,
      imgUrl: require("@/assets/product/mi14.jpg"),
      title:
        "小米14 徕卡光学镜头 光影猎人900 徕卡75mm浮动长焦 骁龙8Gen3 16+512 黑色 小米手机 红米手机 5G",
      price: "4599",
      vipPrice: "4299",
      shopDesc: "自营",
      delivery: "厂商配送",
      shopName: "小米自营旗舰店",
    },
    {
      skuId: 25,
      imgUrl: require("@/assets/product/mi14.jpg"),
      title:
        "小米14 徕卡光学镜头 光影猎人900 徕卡75mm浮动长焦 骁龙8Gen3 16+512 黑色 小米手机 红米手机 5G",
      price: "4599",
      vipPrice: "4299",
      shopDesc: "自营",
      delivery: "厂商配送",
      shopName: "小米自营旗舰店",
    },
  ],
});
</script>

<style lang="less" scoped>
.search {
  :deep(input) {
    font-size: 13px;
  }
}
.index {
  padding: 0 5px;
}
.swiper {
  .swiper-img {
    height: 300px;
  }
}
.quick {
  margin-bottom: 1px;
  .quick-img {
    width: 20px;
    height: 20px;
  }
}
.recommend {
  .recommend-img {
    width: 54px;
    height: 54px;
    margin-bottom: 5px;
  }
  .top {
    margin-bottom: 2px;
  }
}
.product {
  .nut-card {
    width: auto;
    background: #fff;
    margin-top: 2px;
    padding: 15px 5px 5px 10px;
    border-radius: 5px;
    :deep(.nut-card__left) {
      width: auto;
      height: auto;
      img {
        border-radius: 5px;
        height: 90px;
        width: 90px;
      }
    }
  }
  :deep(.nut-card__right__title) {
    font-size: 13px;
  }
}
</style>